<template>
	<view class="container">
		<view class="header-backgroud-box">
			<text class="header-backgroud-box-title">yzLinker</text>
			<text class="header-backgroud-box-content">基于ESP8266的通用控制器</text>
		</view>
		<view class="user-login-box">
			<text class="user-login-title">登录服务器</text>
			<view class="user-login-line">
				<text class="label-tip">用户名：</text>
				<input class="input-box" placeholder="输入用户名" @input="onNameInputChange" :value="userInput"></input>
			</view>
			<view class="user-login-line">
				<text class="label-tip">密&nbsp;&nbsp;&nbsp;码：</text>
				<input class="input-box" type="password" placeholder="请输入密码" :value="pwdInput" @input="onPwdInputChange"></input>
			</view>
			<view class="user-login-option">
				<checkbox-group @change="onCheckBoxChange">
					<checkbox :checked="rememberUser" value="remember">记住用户</checkbox>
					<checkbox :checked="autoLogin" value="autologin">自动登录</checkbox>
				</checkbox-group>
			</view>
			<view class="user-login-btn">
				<button type="primary" @click="onLoginBtn">登录</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		commonData
	} from '@/utils/common.js'
	export default {
		data() {
			return {
				userInput:'',
				pwdInput:'',
				rememberUser:true,
				autoLogin:false
			};
		},
		onLoad() {
			this.readInfo();
			commonData.mqtt.onConnect = ()=>{
				console.log('connect on login page.')
				uni.redirectTo({
					url:'/pages/devices/devices',
					success() {
						console.log('new page success.')
					},
					fail(e) {
						console.log('faild to new page.'+JSON.stringify(e))
					}
				})
			}
			commonData.mqtt.onConnectFaild = (error)=>{
				console.log('connect mqtt server faild.',error)
				uni.showToast({
					title:'连接失败！',
					icon:'error'
				})
			}
			if(this.autoLogin){
				console.log('auto login')
				commonData.mqtt.login(this.userInput,this.pwdInput)
			}
		},
		methods:{
			/******************
			  UI相关功能代码
			******************/
			onNameInputChange(e){  //用户名相关输入框
				console.log("user name input change.")
				console.log(e.detail.value)
				this.userInput = e.detail.value;
			},
			onPwdInputChange(e){   //密码相关输入框
				console.log("password input change.")
				console.log(e.detail.value)
				this.pwdInput = e.detail.value;
			},
			onCheckBoxChange(e){   //记住用户与自动登录复选框
				console.log("checkbox change.")
				console.log(e.detail.value)
				if(-1 !== e.detail.value.indexOf('remember')){
					console.log('member')
					this.rememberUser = true;
				}else{
					this.rememberUser = false;
				}
				if(-1 !== e.detail.value.indexOf('autologin')){
					console.log('autologin')
					this.autoLogin = true;
					this.rememberUser = true;
				}else{
					this.autoLogin = false;
				}
			},
			onLoginBtn(e){  //登录按键响应函数
				console.log('login button click!')
				console.log('user name:'+this.userInput);
				console.log('password:'+this.pwdInput);
				console.log('remeber user:'+this.rememberUser);
				console.log('auto login:'+this.autoLogin);
				if(this.userInput==''){
					uni.showToast({
						title:'用户名无效！'
					})
					return;
				}
				if(this.pwdInput == ''){
					uni.showToast({
						title:'密码无效！'
					})
					return ;
				}
				
				//进行Mqtt登录操作
				commonData.mqtt.login(this.userInput,this.pwdInput);
				
				if(this.rememberUser || this.autoLogin){
					this.saveInfo();
				}
			},
			/******************
			  存取信息相关功能代码
			******************/
			readInfo(){
				uni.getStorage({  //登录信息读取
					key:"esp8266_login",
					success:(res)=>{
						console.log('read user login info success.')
						let data = JSON.parse(res.data);
						this.userInput = data['username'];
						this.pwdInput = data['password'];
						this.rememberUser = data['remeberuser'];
						this.autoLogin = data['autologin']
					},
					fail:()=>{
						console.log('read user login info faild.')
					}
				})
			},
			saveInfo(){
				uni.setStorage({  //登录信息保存
					key:"esp8266_login",
					data:JSON.stringify({
						'username':this.userInput,
						'password':this.pwdInput,
						'remeberuser':this.rememberUser,
						'autologin':this.autoLogin
						}),
					success:()=>{
						console.log('save user login info success.')
					},
					fail:()=>{
						console.log('save user login info faild.')
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.container {
		font-size: 28rpx;
		line-height: 48rpx;

		.header-backgroud-box{
			height: 300rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			background-color: white;
			background-image: url('data:');
			background-size: 60%;
			background-repeat: no-repeat;
			background-position: 90% 0%;
			//border: solid 1rpx cyan;
			.header-backgroud-box-title{
				display: flex;
				margin-left: 50rpx;
				font-size: 2em;
				color: yellowgreen;
				line-height: 100rpx;
			}
			.header-backgroud-box-content{
				display: flex;
				margin-left: 50rpx;
				font-size: 32rpx;
				line-height: 50rpx;
				color: #77eeff;
			}
		}

		.user-login-box{
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 50rpx 80rpx;
			background-color: #ffffff;
			margin-top: 10rpx;
			.user-login-title{
				font-size: 2em;
				display: flex;
				justify-content: center;
				line-height: 90rpx;
				margin: 30rpx 0rpx;
			}

			.user-login-line{
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				line-height: 60rpx;
				border: solid 1px blue;
				border-radius: 30rpx;
				margin: 10rpx 30rpx;
				padding: 15rpx 20rpx;
				.label-tip{
					width: 6rem;
				}
				.input-box{
					//border-bottom: solid 1px seagreen;
					background-color: #b0bccb;
					display: flex;
					flex-grow: 1;
					margin-right:10rpx ;
				}
			}
			
			.user-login-option{
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				margin: 20rpx 10rpx;
			}

			.user-login-btn{
				margin: 20rpx 30rpx;
				padding: 15rpx 20rpx;
			}
		}
	}
</style>
